<!--微信支付订单-->
<meta charset="utf-8"/>
<div class="row">
  <div class="col-xs-12">
    <div class="row">
      <div class="col-xs-12">
        <div style="height:36px;margin-top:2px">
          <table class="no-border" style="display:inline">
            <tr>
              <td permission='order_info_btn_listData' style="padding-right:6px;display:none" class="hidden-480">
                下单时间
              </td>
              <td permission='order_info_btn_listData' style="display:none" class="hidden-480">
                <input type="text" id="add_date_start" placeholder="起始日期" readonly class="form-control search-query" maxlength="19" style="width:88px;cursor:pointer" title="请选择下单时间起始时间"/>
              </td>
              <td permission='order_info_btn_listData' style="display:none" class="hidden-480">
                <i class='fa fa-exchange'></i>
              </td>
              <td permission='order_info_btn_listData' style="display:none" class="hidden-480">
                <input type="text" id="add_date_end" placeholder="结束日期" readonly class="form-control search-query" maxlength="19" style="width:88px;cursor:pointer" title="请选择下单时间结束时间"/>
              </td>
              <td permission='order_info_btn_goodsList' style="padding-right:6px;padding-left:6px;display:none;" class="goods_name">
                商品名称
              </td>
              <td permission='order_info_btn_goodsList' style="display:none;" class="goods_name">
                <div class="input-group">
                  <span class="input-group-btn">
                    <button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle col-sm-12" style="margin-left:0px">
                      <span id="searchLabel_goods_id">全部商品</span>
                      <i class="ace-icon fa fa-angle-down"></i>
                    </button>
                    <ul class="dropdown-menu col-sm-12" id="ulSearch_goods_id" style="width:384px;min-width:384px"></ul>
                    <input id="key_goods_id" type="hidden"/>
                  </span>
                </div>
              </td>
              <td permission='order_info_btn_listData' style="padding:0 6px;display:none">
                购买类型
              </td>
              <td permission='order_info_btn_listData' style="display:none">
                <span class="input-group-btn" style="min-width:99px">
                  <button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle col-sm-12" id="btn_buyer_type" style="margin-left:0px">
                    <span id="labelSearch_buyer_type">全部类型</span>
                    <i class="ace-icon fa fa-angle-down"></i>
                  </button>
                  <ul class="dropdown-menu col-sm-12" style="width:99px;min-width:99px">
                    <li>
                      <a href="javascript:winFn.dropdown('#key_buyer_type','','#labelSearch_buyer_type','全部类型');">全部类型</a>
                    </li>
                    <li>
                      <a href="javascript:winFn.dropdown('#key_buyer_type','1','#labelSearch_buyer_type','消费者购买');">消费者购买</a>
                    </li>
                    <li>
                      <a href="javascript:winFn.dropdown('#key_buyer_type','2','#labelSearch_buyer_type','门店采购');">门店采购</a>
                    </li>
                    <li>
                      <a href="javascript:winFn.dropdown('#key_buyer_type','3','#labelSearch_buyer_type','区代采购');">区代采购</a>
                    </li>
                  </ul>
                  <input id="key_buyer_type" type="hidden"/>
                </span>
              </td>
              <td permission='order_info_btn_listData' style="padding:0 6px;display:none;" class="hidden-480">
                支付类型
              </td>
              <td colspan="2" permission='order_info_btn_listData' style="display:none" class="hidden-480">
                <span class="input-group-btn">
                  <button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle col-sm-12" style="margin-left:0px;">
                    <span id="labelTrade_type">全部类型</span>
                    <i class="ace-icon fa fa-angle-down"></i>
                  </button>
                  <ul class="dropdown-menu col-sm-12" style="width:99px;min-width:99px;">
                    <li>
                      <a href="javascript:winFn.dropdown('#key_trade_type','','#labelTrade_type','全部类型');">全部类型</a>
                    </li>
                    <li>
                      <a href="javascript:winFn.dropdown('#key_trade_type','1','#labelTrade_type','微信支付');">微信支付</a>
                    </li>
                    <li>
                      <a href="javascript:winFn.dropdown('#key_trade_type','2','#labelTrade_type','积分支付');">积分支付</a>
                    </li>
                  </ul>
                  <input id="key_trade_type" type="hidden"/>
                </span>
              </td>
              <td permission='order_info_btn_listData' style="display:none">
                <div class="input-group">
                  <span class="input-group-btn"><button type="button" class="btn btn-inverse btn-white" id="btnSearch" title="搜索查询"><span class="ace-icon fa fa-search bigger-110"></span>搜索</button></span>
                </div>
              </td>
              <td permission='order_info_btn_listData' style="display:none" class="hidden-480">
                <div class="input-group">
                  <span class="input-group-btn"><button type="button" class="btn btn-inverse btn-white" id="btnReset" title="重置清空搜索关键字"><span class="ace-icon fa fa-undo bigger-110"></span>重置</button></span>
                </div>
              </td>
              <td permission='order_info_btn_area' style="display:none;" class="hidden-480">
                <div class="input-group">
                  <span class="input-group-btn"><button type="button" class="btn btn-inverse btn-white" id="btnArea" title="获取行政区域"><span class="ace-icon fa fa-map-marker bigger-110"></span>区域</button></span>
                </div>
              </td>
            </tr>
          </table>
          <div class="hidden-480 pull-right tableTools-container" permission='order_info_btn_listData' style="display:none;margin-bottom:2px"></div>
        </div>
        <div class="space-1"></div>
        <div class="profile-contact-links align-left" style="padding:10px;font-weight:600;">
          <span id="totalMoney" style="color:#F56C6C;">正在加载……</span>
          <span id="salesVolume" style="color:#24b0ef;margin-left:50px;"></span>
        </div>
        <div class="space-2"></div>
        <table id="tableListOrderInfo" class="table table-striped table-bordered table-hover">
          <tbody>
          <tr>
            <td style="text-align:center;height:37px">正在加载……</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<div id="divKeyColumns" style="display:none;padding:1px 0px;"></div>
<div style="display:none;">
  <input type="hidden" id="order_info_btn_listData"/>
  <input type="hidden" id="order_info_row_edit"/>
  <input type="hidden" id="order_info_row_queryById"/>
</div>
<div id="div_batch_tree" style="display:none;padding-top:2px">
  <ul id="ulBatchTree" class="ztree">
    <li><span>正在加载……</span></li>
  </ul>
</div>
<script type="text/javascript">
  ;(function($){
    var tableDom = '#tableListOrderInfo';
    var urlRoute = '/orderInfo/';/*请求controller层的url*/
    var getList = urlRoute + 'listData';/*获取数据列表*/
    var urlQueryById = urlRoute + 'queryById';/*根据id查询对应的数据*/
    var urlDelById = urlRoute + 'delById';/*根据id删除对应的数据*/
    var getGoodsList = urlRoute + 'getGoodsList';/*获取字段goods_id的下拉框列动态值选项的数据*/
    var stateOriginal = {};//仅供参考，更新优化-选项1,可参考项目law-frontend的页面serviceAd.html和后端law-backend的ServiceADService.java;记录编辑的值,仅在编辑时可用
    var urlArea = urlRoute + 'getAreaTree';/*获取行政区域列表*/
    var areaJson = null;
    var batchTreeObj = null;
    var batchTreeDom = '#ulBatchTree';
    var batchTreeConfig = {
      view : zTreeOpts.view(),
      data : zTreeOpts.data(),
      async : zTreeOpts.async({
        url : urlArea,
        method : 'GET',
        tips : true
      }),
      callback : {
        onClick : function(event,treeId,node){},
        beforeAsync : function(treeId,node){
          if(node == undefined){
            self.layerIndex = layerFn.loading('正在处理……');
          }
        },
        onAsyncSuccess : function(event,treeId,node,data){
          if(node == undefined){
            layerFn.closeIndex(self.layerIndex);
            thisPage.batchHandler();
          }
        },
        onAsyncError : function(event,treeId,node){
          if(node == undefined){}//此时ztree节点尚未生成
          layerFn.alert('连接服务器失败',AppKey.code.code199);
        },
        beforeClick : function(treeId,node,clickFlag){
          var end = node.grade < 4;
          if(end){
            self.areaText = zTreeOpts.getPath(node);
            areaJson = zTreeOpts.getNodeData(node);
          }else{
            layerFn.alert('仅支持区县级',AppKey.code.code199);
          }
          return end;//true时点击选中文本
        }
      }
    };
    var thisTable = null;
    thisPage = {
      init : function(){
        this.initTable();
        this.createDropdown();
        this.initDom();
        this.addEvent();
      },
      initDom : function(){
        laydate.render({
          elem : '#add_date_start',//指定元素
          format : 'yyyy-MM-dd',/*格式*/
          showBottom : false,/*是否显示底部栏*/
          type : 'date'/*格式,datetime|date|time*/
        });
        laydate.render({
          elem : '#add_date_end',//指定元素
          format : 'yyyy-MM-dd',/*格式*/
          showBottom : false,/*是否显示底部栏*/
          type : 'date'/*格式,datetime|date|time*/
        });
      },
      createDropdown : function(){
        authHandler('order_info_btn_goodsList',function(){
          layerFn.ajaxGetResult(getGoodsList,{},function(data){
            if(AppKey.code.code200 == data.code){
              winFn.initDropdown(data.data,'#ulSearch_goods_id','#key_goods_id','#searchLabel_goods_id','全部商品');
            }else{
              winFn.initDropdown([],'#ulSearch_goods_id','#key_goods_id','#searchLabel_goods_id',data.msg);
            }
          });
        },function(){
          $('.goods_name').remove();
        });
      },
      addEvent : function(){
        //搜索按钮
        $('#btnSearch').on('click', function(){
          thisPage.search(true);
        });
        //重置按钮
        $('#btnReset').on('click', function(){
          $('#labelSearch_buyer_type').text('全部类型');
          $('#labelTrade_type').text('全部类型');
          $('#key_buyer_type').val('');
          $('#key_trade_type').val('');
          $('#add_date_start').val('');
          $('#add_date_end').val('');
          $('#key_goods_id').val('');
          $('#searchLabel_goods_id').text('全部商品');
          areaJson = null;//置空
          thisPage.AreaHtml('区域');
          if(batchTreeObj != null){
            batchTreeObj.cancelSelectedNode();//取消选中
          }
        });
        //按钮组-自定义显示列
        $('#iconColumn').parent().parent().on('click', function(){
          pageDataTable.columnCustom(thisTable, tableDom,'#divKeyColumns');
        });
        //按钮组-搜索
        $('#iconRefresh').parent().parent().on('click', function(){
          thisPage.search(true);
        });
        //获取区域数据用于构建树形
        $('#btnArea').on('click', function(){
          var value = winFn.getDomValue('#key_buyer_type');
          if(value == null){
            layerFn.alertCallback('请先选择购买类型！',function(){
              $('#btn_buyer_type').trigger('click');
            });
            return;
          }
          authHandler('order_info_btn_area',function(){
            batchTreeObj = $.fn.zTree.init($(batchTreeDom),batchTreeConfig);
          });
        });
      },
      batchHandler : function(){
        var zIndexLayer = layerFn.addOrEdit('选择行政区域','#div_batch_tree',['510px','450px'],function(layerIndex){
          thisPage.AreaHtml(self.areaText);
          layerFn.closeIndex(layerIndex);
        },'<label style="color:#f1a02f;">重置</label>',function(){
          areaJson = null;//置空
          thisPage.AreaHtml('区域');
          batchTreeObj.cancelSelectedNode();//取消选中
        });
        $('#layui-layer' + zIndexLayer + ' a.layui-layer-btn0').text('确定');
      },
      AreaHtml : function(text){
        $('#btnArea').html('<span class="ace-icon fa fa-map-marker bigger-110"></span>'+text);
      },
      /**获取已选中的主键集合,用法:var kids = thisPage.getKeyIds();if(kids == null || kids == ''){layerFn.alert('请选择要操作的数据', AppKey.code.code199);return;}*/
      getKeyIds : function(){
        var arrays = thisTable.rows({selected : true}).data();//获取已勾选的数据行
        if(arrays.length == 0){
          return null;
        }
        var kids = '';
        for(var i = 0; i < arrays.length; i++){
          var value = arrays[i].kid;
          if(value != ''){
            if(kids.length > 0) kids += ",";
            kids += value;
          }
        }
        return kids;
      },
      initTable : function(){
        var optsVisible = getOptsVisible('order_info_row');//确定是否要显示操作选项,若是多个按钮权限时以逗号,隔开
        var optsBatchBtn = getOptsVisible('order_info_btn_delByKeys');//是否有批量操作的权限,若是多个按钮权限时以逗号,隔开
        var aoColumns = [];
        aoColumns.push({
          data : "goodsName",
          sortable : false,
          title : "商品名称"
        });
        aoColumns.push({
          data : "out_trade_no",
          sortable : false,
          title : "订单号",
          width: "190px",
          render : function(value,type,row,meta){
            return value ? value : '1';
          }
        });
        aoColumns.push({
          data : "bottles",
          sortable : false,
          title : "瓶数",
          render : function(value,type,row,meta){
            return value ? value : '1';
          }
        });
        aoColumns.push({
          data : "item_fee",
          sortable : false,
          title : "购买金额",
          render : function(value,type,row,meta){
            if(row.bottles){
              return value * row.bottles;
            }else{
              return value;
            }
          }
        });
        aoColumns.push({
          data : "trade_type",
          sortable : false,
          title : "支付类型",
          render : function(value,type,row,meta){
            switch (value){
              case 1:
                return "微信支付";
              case 2:
                return "积分支付";
              default:
                return "";
            }
          }
        });
        aoColumns.push({
          data : "add_date",
          sortable : false,
          title : "下单时间",
          class : 'text-center',
          width: "256px",
          render : function(value){
            if(value){
              return winFn.formatDate(value,true);
            }else{
              return "";
            }
          }
        });
        if(optsVisible){
          aoColumns.push({
            data : "_kid_",
            width : "75px",
            class : 'text-center',
            title : "<label style='color:#000' title='单行操作'>操作选项</label>",/*此处的字‘操作选项’请勿修改,此处的文字还有其它用途*/
            sortable : false
          });
        }
        var columnDefs = [];
        if(optsVisible){//是否来显示某列
          columnDefs.push({
            targets : -1,
            render : function(value,type,row,meta){
              return "<a title='编辑|修改' href='javascript:thisPage.rowEdit("+ meta.row +");' style='outline:none;text-decoration:none;color:#3b8cff;display:none' permission='order_info_row_edit'>编辑</a>";
            }
          });
        }
        var columnTarget = [];
        for(var o=0;o<aoColumns.length;o++){
          columnTarget.push(o);
        }
        columnDefs.push({
          targets : optsBatchBtn ? columnTarget.slice(1) : columnTarget,
          render : function(value,type,row,meta){
            return pageDataTable.formatColumn(value);
          }
        });
        columnDefs.push({
          visible : false,//列的隐藏显示
          targets : []//指定列索引
        });
        thisTable = pageDataTable.initDataTable({
          tableDom : tableDom,
          sAjaxSource : getList,
          fnServerParams : function(params){
            params.push(
              {"name":"buyer_type","value":winFn.getDomValue('#key_buyer_type')},
              {"name":"trade_type","value":winFn.getDomValue('#key_trade_type')},
              {"name":"goods_id","value":winFn.getDomValue('#key_goods_id')},
              {"name":"add_date_start","value":winFn.getDomValue('#add_date_start') ? new Date(winFn.getDomValue('#add_date_start').replace(new RegExp("-","gm"),"/")).getTime()/1000 : ''},
              {"name":"add_date_end","value":winFn.getDomValue('#add_date_end') ? new Date(winFn.getDomValue('#add_date_end').replace(new RegExp("-","gm"),"/")).getTime()/1000 : ''}
            );
            if(areaJson != null){
              params.push(
                {"name":"areaData","value":JSON.stringify(areaJson)}
              );
            }
          },
          aoColumns : aoColumns,
          columnDefs : columnDefs,
          complete : function(settings,data){},//仅执行一次
          footer : function(data,start,end,thLength){},//每次都会执行
          drawCallback : function(settings){
            var json = settings.jqXHR.responseJSON;
            if(AppKey.code.code200 == json.code){
              var attach = settings.jqXHR.responseJSON.attach || null;
              $('#totalMoney').text("订单金额："+attach.totalMoney);
              $('#salesVolume').text("销售数量："+attach.salesVolume+' 瓶');
            }else{
              $('#totalMoney').text("订单金额：0.00");
              $('#salesVolume').text("销售数量：0 瓶");
            }
          },
          selected : function(selected){}
        });
        pageDataTable.buttons(thisTable);
        pageDataTable.action(thisTable);
        pageDataTable.select(thisTable, tableDom);
        pageDataTable.tooltip();
        $('.dataTables_scroll .dataTables_scrollBody').removeAttr('style');//解决dataTable表头下拉框被tbody遮挡
      },
      //是否是搜索,是则搜索时则返回到第一页
      search : function(search){
        if(verifyFn.inputCheck('#order_info_btn_listData','没有操作权限')) return;
        $(tableDom + '_wrapper table input[type=checkbox]').prop('checked',false);//此行不需要,因为搜索时表格已重新渲染
        //thisTable.draw();保留
        if(search){
          $(tableDom).DataTable().ajax.reload();//编辑时成功会重载所有接口数据，返回到第一页
        }else{
          $(tableDom).DataTable().ajax.reload(null,false);//编辑时成功重新加载表数据(分页页码保留);
        }
      },
      //需要时或为空时才去请求,减轻服务器查询,仅适用于不需要分页的数据,用法:thisPage.getOrder_infos(function(list){});参考项目 wine-frontend/src/main/resources/static/activity.html的getGoods方法
      getOrder_infos : function(callback){
        if(listOrder_info == null){//定义全局的 var listOrder_info = null;//新增或编辑时所需的数据
          layerFn.queryGetHintResult(urlQueryOrder_info,{},function(data){
            if(AppKey.code.code200 == data.code){
              listOrder_info = data.data;
              callback(listOrder_info);
            }else{
              callback();//注意判断 if(listOrder_info != null){}为空,可参考 liquor-console/src/main/resources/static/goods.html
            }
          });
        }else{
          callback(listOrder_info);
        }
      },
      resetForm : function(){
        winFn.clearFormData('#form_order_info_edit',[{'dropdownLabel_buyer_type':'选择购买类型'}]);
      },
      edit : function(kid){
        var title = '添加';
        if(kid != null && kid.length > 0){
          if(verifyFn.inputCheck('#order_info_row_queryById','没有操作权限')) return;
          title = '编辑';
          layerFn.queryByIdHint(urlQueryById, kid, function(data){
            thisPage.openDialog(title, kid, data);
            //thisPage.editJson(data.data,['ad_img']);//仅在赋值后再执行此代码,更新优化-选项2
          });
        }else{
          thisPage.openDialog(title);
        }
      },
      //移除不需要对比的key(此方法可有可无)
      editJson : function(data,keys){
        if(keys){
          for(var h = 0; h < keys.length; h++){
            delete data[keys[h]];//删除key元素
          }
        }
        stateOriginal = data;
      },
      //对比是否已修改了值,仅需判断必填的字段，文件上传的字段单独处理
      filterValue : function(params){
        if(stateOriginal != null){
          var ignoreKeys = '';
          var requiredKeys = '';
          for(var so in stateOriginal){
            if(params[so] == stateOriginal[so]){
              delete params[so];
              if(ignoreKeys != ''){
                ignoreKeys += ','+so;
              }else{
                ignoreKeys += so;
              }
            }else{
              if(requiredKeys != ''){
                requiredKeys += ','+so;
              }else{
                requiredKeys += so;
              }
            }
          }
          if(ignoreKeys != ''){
            params['ignoreKeys'] = ignoreKeys;//记录后端忽略验证的key以,隔开的字符串,注意数据库字段是否允许为空,可参考项目law-backend的joins.html;law-backend的JoinsService的方法edit();
          }
          if(requiredKeys != ''){
            params['requiredKeys'] = requiredKeys;//记录后端必填验证的key以,隔开的字符串
          }
        }
      },
      openDialog : function(title, kid, map){
        thisPage.resetForm();
        if(map != null){
          $.each(map.data,function(k,v){
            try{
              if(k == 'buyer_type'){
                winFn.editDropdown('#dropdownLabel_buyer_type','buyer_type' + v);
                $('#' + k).val(v);
                return true;
              }
              $('#' + k).val(v);//若是有问题则把这个放在最前面
            }catch(e){}
          });
        }
      },
      rowEdit : function(rowIndex){
        var row = thisTable.row(rowIndex).data();
        thisPage.edit(row.kid);
      },
      rowDel : function(rowIndex){
        if(verifyFn.inputCheck('#order_info_row_delById','没有删除操作权限')) return;
        var row = thisTable.row(rowIndex).data();
        layerFn.confirm('删除后无法恢复,确定要删除吗?', function(){
          layerFn.delByIdHint(urlDelById, row.kid,function(data){
            thisPage.complete(data,null,true);
          });
        });
      },
      //查看隐藏部分是全部内容,用法 render : function(value,type,row,meta){return thisPage.rowColumnView(value);}
      rowColumnView : function(value){
        if(value == null || value == undefined || value == '') return '';
        value = typeof value === 'string' ? value.replace(/</g, '&lt;').replace(/"/g, '&quot;') : value;//如果提示SyntaxError: expected expression, got '>'错误则注释掉即可
        var len = value.length;
        if(len > 30){
          return "<a href='javascript:layerFn.viewValue(\""+value+"\",\"430px\");' title='点击查看详情' style='outline:none;text-decoration:none;'>"+value.substring(0,30)+"…</a>";
        }else{
          return value;
        }
      },
      complete : function(data,index,search){
        try{
          if(index){
            layerFn.closeIndex(index);
          }
          if(search){
            thisPage.search();
          }
          if(data){
            layerFn.handleResult(data.msg,data.code);
          }
        }catch(e){}
      }
    };
    thisPage.init();
    $('script').remove();
  })(jQuery);
</script>